<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap.min.css"/>" />
	<link href="/resources/lib/font-awesome-4.4.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
	<link href="/resources/css/header.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="<c:url value="/resources/css/common.css"/>" />
	
<link rel="stylesheet"
	href="<c:url value="/resources/css/dataAdaptor/formula.css"/>" />
	<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/bootstrap-3.3.5/js/bootstrap.min.js" />"
	type="text/javascript"></script>

<script
	src="<c:url value="/resources/lib/angular-1.4.7/angular.min.js"/>"
	type="text/javascript">
	
</script>
<script
	src="<c:url value="/resources/lib/ui-bootstrap-tpls-0.13.4.min.js"/>"
	type="text/javascript">
	
</script>


<script src="<c:url value="/resources/js/dataAdaptor/formula.js" />"
	type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>formula</title>
</head>
<body ng-app="conversionTool">
<ng-include src="'/resources/viewPart/nav.html'" >
	
	</ng-include>
	<header>
	  <div class="head-line">
		<h3 class="head-title">Formula</h3>
		</div>
	</header>

	<section class="container" ng-controller="formularCtrl">

   <form class="form-horizontal text-center">
		<div ng-init="setDataTemplateId('${dataTemplate.id}')"></div>

		<div class="form-group text-center form-line">

			<div class="col-xs-4 text-right">
				<label>Choose Column Name</label>
				</div>
				 <div class="col-xs-8 text-left">
				<div class="btn-group" dropdown keyboard-nav>
					<button id="columnName" type="button" class="btn btn-default"
						dropdown-toggle>
						{{columnName}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" id="dropdown-menu-w" role="menu" aria-labelledby="columnName">
						<c:forEach var="item" items="${dataTemplate.header}">

							<li role="menuitem"><a href="#"
								ng-click="setColumnName('${item}')">${item}</a></li>
						</c:forEach>
					</ul>
				</div>
			</div>
</div>


			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
				<label>Choose Operation</label>
				</div>
				
				<div class="col-xs-8 text-left">
				<div class="btn-group" dropdown keyboard-nav>
					<button id="operation" type="button" class="btn btn-default"
						dropdown-toggle>
						{{operation}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" id="dropdown-menu-p" role="menu" aria-labelledby="operation">
						<li role="menuitem"><a href="#"
							ng-click="setOperation('toUpCase',0)">to up case</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('toLowCase',0)">to low case</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('subString',2)">subString</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('Trim',0)">trim</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('InitCap',0)">initCap</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('Replace',2)">replace</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('add',1)">number add</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('minus',1)">number minus</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('multiply',1)">number multiply</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('divide',1)">number divide</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('mod',1)">number mod</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('CurrentTime',0)">add currentTime</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('AddDay',1)">add days</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('AddMonth',1)">add months</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('AddYear',1)">add years</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('MinusDay',1)">minus days</a></li>
					    <li role="menuitem"><a href="#"
							ng-click="setOperation('MinusMonth',1)">minus Months</a></li>
						<li role="menuitem"><a href="#"
							ng-click="setOperation('MinusYear',1)">minus years</a></li>
					</ul>
				</div>
			</div>
			</DIV>

			<div class="form-group text-center form-line">
			 <div class="col-xs-4 text-right">
				<label> parameter1</label> 
				</DIV>
				<div class="col-xs-8">
				
				<input type="text" class="form-control"
					ng-model="value1" />
			</div>
			</div>
			
			
		<div class="form-group text-center form-line">
		
		 <div class="col-xs-4 text-right">
				<label> Parameter2</label> 
				</div>
				
				<div class="col-xs-8">
				<input type="text" class="form-control"
					ng-model="value2" />
			</div>
			</DIV>

<div class="form-group text-center form-line">
 <div class="col-xs-4 text-right"></div>
   <div class="col-xs-8 text-right">
	
				<input type="button" value="Add" class="btn btn-primary"
					ng-click="addCondition()" />
			</div>
			</div>
	
		
<!-- <div class="result"> -->
		<div class="form-group text-center form-line">
		 <div class="col-xs-4 text-right"></div>
		  <div class="col-xs-8">
			<table class="table table-bordered table-hover">

				<thead>
					<tr>
						<th>column name</th>
						<th>operation</th>
						<th>parameter1</th>
						<th>parameter2</th>
						<th>delete</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="(k,item) in formula.formula">
						<td>{{item.columnName}}</td>
						<td>{{item.operation}}</td>
						<td>{{item.value1}}</td>
						<td>{{item.value2}}</td>
						<td>
						<!-- <input type="button" class="btn btn-default" ng-click="deleteFilter(k)" value="delete" /> -->
						<button type="button"  class="btn btn-default btn-border"  ng-click="deleteFilter(k)"  >
						<span><i class="glyphicon glyphicon-trash"></i></span>
						</button> 
						
						
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		</div>


  <div class="form-group text-center form-line">
  <div class="col-xs-4 text-right"></div>
  <div class="col-xs-8 text-right">
  
	
			<input type="button" value="Save" class="btn btn-primary two-btn"
				ng-click="save()" />
			<input type="button" value="Back" class="btn btn-primary two-btn"
					ng-click="back()" />
		</div>
		</div>

		<div class="form-group text-center">
			<div class="control-group error">
				<div class="controls">

					<span class="help-inline">{{msg}}</span>
				</div>
			</div>
		</div>

</form>
	</section>


</body>
</html>
